<template>
  <div class="hello">
    <canvas id="c_n12" width="1920" height="501" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
    <div class="wrapper"><!-- 锟斤拷锟斤拷 -->
      <div class="littleH"><!-- 小锟斤拷锟斤拷 -->
        <div class="bodyH"><!-- 锟斤拷锟斤拷 -->
          <div class="trousers"><!-- 锟斤拷锟斤拷 -->
            <div class="condoleBelt"><!-- 锟斤拷锟斤拷 -->
              <div class="left"></div>
              <div class="right"></div>
            </div>
            <div class="trousers_top"></div><!-- 锟斤拷锟斤拷突锟斤拷锟侥撅拷锟轿诧拷锟斤拷 -->
            <div class="pocket"></div><!-- 锟斤拷锟?-->
            <!-- 锟斤拷锟斤拷锟斤拷 -->
            <span class="line_left"></span>
            <span class="line_right"></span>
            <span class="line_bottom"></span>
          </div>
        </div>
        <div class="hair"><!-- 头锟斤拷 -->
          <span class="left_hair_one"></span>
          <span class="left_hair_two"></span>
        </div>
        <div class="eyes"><!-- 锟桔撅拷 -->
          <div class="leftEye"><!-- 锟斤拷锟斤拷 -->
            <div class="left_blackEye">
              <div class="left_white"></div>
            </div>
          </div>
          <div class="rightEye"><!-- 锟斤拷锟斤拷 -->
            <div class="right_blackEye">
              <div class="right_white"></div>
            </div>
          </div>
        </div>
        <div class="mouse"><!-- 锟斤拷锟?-->
          <div class="mouse_shape"></div>
        </div>
        <div class="hands"><!-- 双锟斤拷 -->
          <div class="leftHand"></div>
          <div class="rightHand"></div>
        </div>
        <div class="feet"><!-- 双锟斤拷 -->
          <div class="left_foot"></div>
          <div class="right_foot"></div>
        </div>
        <div class="groundShadow"></div><!-- 锟脚碉拷锟斤拷影 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
<style>
  body{
    margin: 0;
    padding:0;
  }
  .wrapper{
    width: 300px;
    margin:100px auto;
  }
  .litteH{
    position: relative;
  }
  .bodyH{
    position: absolute;
    width: 240px;
    height: 400px;
    border:5px solid #000;
    border-radius: 115px;
    background: rgb(249,217,70);
    overflow: hidden;
    z-index: 2;
  }
  .bodyH .condoleBelt{
    position: absolute;
  }
  .bodyH .trousers{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    border-top: 6px solid #000;
    background: rgb(32,116,160);
  }
  .trousers_top{
    width: 160px;
    height: 60px;
    border:6px solid #000;
    border-bottom: none;
    border-radius: 0 0 5px 5px;
    background: rgb(32,116,160);
    position: absolute;
    bottom: 100px;
    left:34px;
  }
  .bodyH .condoleBelt .left,
  .bodyH .condoleBelt .right{
    width: 100px;
    height: 16px;
    border:5px solid #000;
    background: rgb(32,116,160);
    position: absolute;
    top:-90px;
    left:-35px;
    z-index: 2;
    -webkit-transform:rotate(45deg);
  }
  .bodyH .condoleBelt .left{
    top:-88px;
    left:165px;
    -webkit-transform:rotate(-45deg);
  }
  .bodyH .condoleBelt .left:after,
  .bodyH .condoleBelt .right:after{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top:4px;
    left:88px;
  }

  .bodyH .condoleBelt .left:after{
    left:5px;
  }
  .pocket{
    width: 60px;
    height: 45px;
    border:6px solid #000;
    border-radius: 0px 0px 25px 25px;
    position: absolute;
    bottom:65px;
    left:84px;
  }
  .line_right{
    width: 30px;
    height: 30px;
    border-bottom-left-radius: 100px;
    border-bottom:6px solid #000;
    border-left:6px solid #000;
    position: absolute;
    left: 0;
    bottom:60px;
    -webkit-transform:rotate(-75deg);
  }
  .line_left{
    width: 30px;
    height: 30px;
    border-bottom-right-radius: 100px;
    border-bottom:6px solid #000;
    border-right:6px solid #000;
    position: absolute;
    right: 0;
    bottom:63px;
    -webkit-transform:rotate(75deg);
  }
  .line_bottom{
    height: 40px;
    border:3px solid #000;
    border-radius: 3px;
    position: absolute;
    left:118px;
    bottom: 0px;
  }
  .eyes{
    position: relative;
    z-index: 3;
  }
  .eyes .leftEye,.eyes .rightEye{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border:6px solid #000;
    background: #fff;
    position: absolute;
    top:60px;
    left: 27px;
  }
  .eyes .leftEye{
    left: 124px;
  }
  .eyes .leftEye .left_blackEye,
  .eyes .rightEye .right_blackEye{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top:24px;
    left:22px;
  }
  .eyes .leftEye .left_blackEye .left_white,
  .eyes .rightEye .right_blackEye .right_white{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top:7px;
    left:17px;
  }
  .eyes .leftEye .left_blackEye .left_white{
    top:4px;
    left:17px;
  }
  .eyes .leftEye:after,
  .eyes .rightEye:after{
    content: '';
    width: 28px;
    height: 18px;
    background: #000;
    position: absolute;
    left:-30px;
    top:37px;
    -webkit-transform:skewX(20deg) rotate(7deg);
  }
  .eyes .leftEye:after{
    left:89px;
    top:37px;
    -webkit-transform:skewX(-20deg) rotate(-7deg);
  }
  .mouse{
    position: relative;
  }
  .mouse .mouse_shape{
    width: 55px;
    height: 35px;
    border:5px solid #000;
    border-bottom-left-radius: 30px;
    background: #fff;
    position: absolute;
    top:175px;
    left:98px;
    z-index: 3;
    -webkit-transform:rotate(-35deg);
  }
  .mouse .mouse_shape:after{
    content: '';
    width: 70px;
    height: 32px;
    border-bottom:5px solid #000;
    border-radius:35px 26px 5px 5px;
    background: red;
    position: absolute;
    top:-16px;
    left:3px;
    -webkit-transform:rotate(34deg);}
  mouse .mouse_shape:after{
    content: '';
    width: 70px;
    height: 32px;
    border-bottom:5px solid #000;
    border-radius:35px 26px 5px 5px;
    background: rgb(249,217,70);
    position: absolute;
    top:-16px;
    left:3px;
    -webkit-transform:rotate(34deg);
    -webkit-animation: mouse_mask 5s ease-in-out infinite;
  }
  .hands{
    position: relative;
  }
  .hands .leftHand,
  .hands .rightHand{
    width: 80px;
    height: 80px;
    border:6px solid #000;
    border-radius: 25px;
    background: rgb(249,217,70);
    position: absolute;
    top:220px;
    left:-23px;
    -webkit-transform:rotate(40deg);
  }
  .hands .leftHand{
    left:182px;
    top:220px;
    -webkit-transform:rotate(-40deg);
  }
  .hands .leftHand:after,
  .hands .rightHand:after{
    content: '';
    width: 6px;
    border:3px solid #000;
    border-radius: 3px;
    position: absolute;
    left:13px;
    top:50px;
    -webkit-transform:rotate(90deg);
  }

  .hands .leftHand:after{
    left:53px;
    top:50px;
    -webkit-transform:rotate(-90deg);
  }
  .feet{
    position: relative;
  }
  .feet .left_foot,
  .feet .right_foot{
    width: 36px;
    height: 50px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 9px;
    background: #000;
    position: absolute;
    top: 406px;
    left:88px;
    -webkit-transform-origin: right top;
  }
  .feet .left_foot{
    border-bottom-right-radius: 9px;
    border-bottom-left-radius: 6px;
    left:130px;
    -webkit-transform-origin: left top;
  }
  .feet .left_foot:after,
  .feet .right_foot:after{
    content: '';
    width: 60px;
    height: 35px;
    border-radius: 20px 10px 21px 15px;
    background: #000;
    position: absolute;
    left:-36px;
    top:14.4px;
    -webkit-transform:rotate(5deg);
  }
  .feet .left_foot:after{
    border-radius: 10px 20px 15px 21px;
    left:13px;
    -webkit-transform:rotate(-5deg);
  }
  .hair{
    position: relative;
  }
  .left_hair_one{
    width: 130px;
    height: 100px;
    border-radius: 50%;
    border-top:8px solid #000;
    position: absolute;
    left:17px;
    top:-17px;
    -webkit-transform:rotate(27deg);
  }
  .left_hair_two{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border-top:6px solid #000;
    position: absolute;
    left:45px;
    top:-10px;
    -webkit-transform:rotate(15deg);
  }


  .groundShadow{
    width: 200px;
    height: 2px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
    top: 455px;
    left:25px;
  }
  .left_hair_one{
    -webkit-animation: lefthair 2s ease-in-out infinite;
  }
  @-webkit-keyframes lefthair{
    0%,25%,31%,100%{
    }
    30%{
      -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);
    }
  }
  .eyes .leftEye .left_blackEye,
  .eyes .rightEye .right_blackEye{
    -webkit-animation: blackeye 5s ease-in infinite;
  }
  @-webkit-keyframes blackeye{
    0%,20%,50%,70%,100%{
      -webkit-transform: translateX(0px);
    }
    30%,40%{
      -webkit-transform: translateX(15px);
    }
    80%,90%{
      -webkit-transform: translateX(-15px);
    }
  }
  .mouse .mouse_shape:after{
    content: '';
    width: 70px;
    height: 32px;
    border-bottom:5px solid #000;
    border-radius:35px 26px 5px 5px;
    background: rgb(249,217,70);
    position: absolute;
    top:-16px;
    left:3px;
    -webkit-transform:rotate(34deg);
    -webkit-animation: mouse_mask 5s ease-in-out infinite;
  }
  .eyes .leftEye .left_blackEye .left_white,
  .eyes .rightEye .right_blackEye .right_white{
    -webkit-animation: whiteeye 5s ease-in-out infinite;
  }
  @-webkit-keyframes whiteeye{
    0%,20%,50%,70%,100%{
      -webkit-transform: translateX(0px);
    }
    30%,40%{
      -webkit-transform: translate3d(3px,4px,0);
    }
    80%,90%{
      -webkit-transform: translate3d(-15px,4px,0);
    }
  }
  .mouse .mouse_shape{
    -webkit-animation: mouse 5s ease-in-out infinite;
  }
  @-webkit-keyframes mouse{
    40%,43%{
      width: 45px;
      height: 25px;
      top:180px;
    }
    0%,35%,48%,100%{
      width: 55px;
      height: 35px;
      top:175px;
      -webkit-transform:rotate(-35deg);
    }
  }
  .mouse .mouse_shape:after{
    -webkit-animation: mouse_mask 5s ease-in-out infinite;
  }
  @-webkit-keyframes mouse_mask{
    40%,43%{
      width: 60.5px;
      top:-19.3px;
      left:1.5px;
    }
    0%,35%,48%,100%{
      width: 70px;
      top:-16px;
      left:3px;
      -webkit-transform:rotate(33deg);
    }
  }
  .hands .rightHand{
    -webkit-animation:rightHand .8s ease-in-out infinite;
  }
  @-webkit-keyframes rightHand{
    0%,50%,100%{
      -webkit-transform: rotate(40deg);
    }
    30%{
      -webkit-transform: rotate(37deg) translateX(1px);
    }
  }
  .hands .leftHand{
    -webkit-animation:leftHand .8s ease-in-out infinite;
  }
  @-webkit-keyframes leftHand{
    0%,50%,100%{
      -webkit-transform: rotate(-40deg);
    }
    80%{
      -webkit-transform: rotate(-37deg) translateX(-1px);
    }
  }
  .feet .right_foot{
    -webkit-animation: rightfoot .8s ease-in-out infinite;
  }
  @-webkit-keyframes rightfoot{
    0%,50%,100%{
      -webkit-transform: rotate(0deg);
    }
    80%{
      -webkit-transform: rotate(10deg);
    }
  }
  .feet .left_foot{
    -webkit-animation: leftfoot .8s ease-in-out infinite;
  }
  @-webkit-keyframes leftfoot{
    0%,50%,100%{
      -webkit-transform: rotate(0deg);
    }

    30%{
      -webkit-transform: rotate(-10deg);
    }
  }
</style>
